<template>
  <a-card :bordered="false">
    <search ref="search" :config="searchConfig" @search="search" @getHeight="getHeight"/>
    <div class="page_table">
      <vxe-grid
        ref="xGrid"
        :border="true"
        :resizable="true"
        :showOverflow="true"
        size="mini"
        :loading="loading"
        :height="pageHeight-seachHeight-90"
        :align="left"
        :columns="columns"
        :data="dataSource"
        :checkbox-config="checkboxConfig"
        v-bind="vexConfig"
        @checkbox-change="selectChangeEvent"
        @checkbox-all="selectChangeEvent"
      >
        <template #userType="{ row }">
          {{ row.userType == 1 ? '内部用户' : '外部用户' }}
        </template>
        <template #loginTime="{ row }">
          {{ row.loginTime*1000 | moment }}
        </template>
        <template #pager>
          <vxe-pager
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :currentPage.sync="ipagination.current"
            :page-size.sync="ipagination.pageSize"
            :total="ipagination.total"
            :pageSizes="ipagination.pageSizeOptions"
            @page-change="handlePageChange">
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>


    <!--    <form-add-edit ref='formAdd' @ok='modelFormOk'></form-add-edit>-->
  </a-card>
</template>

<script>
import Vue from 'vue'
import FormAddEdit from '@comp/view/base-crud/form/FormAddEdit'
import { PageListMixin } from '@/mixins/PageListMixin'
import { filterObj } from '@/utils/util'

export default {
  name: 'product-list',
  mixins: [PageListMixin],
  components: {
    FormAddEdit
  },
  data() {
    return {
      description: '登陆日志',
      searchConfig: [
        {
          type: 'input',
          name: 'userName',
          placeholder: '登录账号'
        },
        {
          type: 'date',
          name: 'loginTime',
          placeholder: '登录日期'
        },
        {
          type: 'a-select',
          name: 'userType',
          placeholder: '请选择用户类型',
          option: [
            {
              name: '内部用户',
              value: 1
            },
            {
              name: '外部用户',
              value: 2
            }]
        },
        {
          type: 'input',
          name: 'roleNames',
          placeholder: '角色'
        },
      ],
      //列定义
      columns: [

        {
          title: '登录账号',
          field: 'userName',
          width: 120,
          minWidth: 120,
          fixed: 'left'
        },
        {
          title: '真实姓名',
          field: 'realName',
          minWidth: 120,
        },
        {
          title: '角色',
          minWidth: 120,
          field: 'roleNames'
        },
        {
          title: '用户类型',
          minWidth: 120,
          field: 'userType',
          slots: { default: 'userType' }
        },
        {
          title: '登录ip',
          minWidth: 120,
          field: 'loginIp'
        },
        {
          title: '登录时间',
          minWidth: 120,
          field: 'loginTime',
          slots: {
            default: 'loginTime'
          }
        }
        ,
        {
          title: 'IP详情',
          minWidth: 120,
          field: 'region'
        }
      ],
      url: {
        list: window._CONFIG['domianMqURL'] + '/logApi/findLoginPageList'
      }
    }
  },
  created() {
  },
  methods: {
    handlePaginationChange(value) {
      this.ipagination.pageSize = value
      this.ipagination.current = 1
      this.loadData()
    },
    paginationCurrent(value) {
      if (value == 1) {
        if (this.ipagination.current > 1) {
          this.ipagination.current--
          this.loadData()
        } else {
          this.$message.info('已经是第一页了哦！')
        }
      } else {
        this.ipagination.current++
        this.loadData()
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';

.pagination {
  text-align: right;
  width: 100%;
  padding: 8px 0;
  background-color: #FFFFFF;

  .div-box {
    height: 24px;
    line-height: 22px;
    font-size: 13px;
    display: inline-block;
    border: 1px solid #d9d9d9;
    padding: 0 8px;
    border-radius: 5px;
    margin-right: 10px;
  }

  .div-box:hover {
    background-color: #00A0E9;
    color: #FFFFFF;
    border-color: transparent;
  }
}
</style>